{{ with .Site.Params.algolia }}
  <div id="algolia-search-modal" class="modal-container">
    <div class="modal">
      <div class="modal-header">
        <span class="close-button"><i class="fa fa-times"></i></span>
        <a href="https://algolia.com" target="_blank" rel="noopener" class="searchby-algolia text-color-light link-unstyled">
          <span class="searchby-algolia-text text-color-light text-small">by</span>
          <img class="searchby-algolia-logo" src="https://www.algolia.com/static_assets/images/press/downloads/algolia-light.svg">
        </a>
        <i class="search-icon fa fa-search"></i>
        <form id="algolia-search-form">
          <input type="text" id="algolia-search-input" name="search"
            class="form-control input--large search-input" placeholder="{{ i18n "global.search" }}" />
        </form>
      </div>
      <div class="modal-body">
        <div class="no-result text-color-light text-center">{{ i18n "global.posts_found.zero" }}</div>
        <div class="results">
          {{ $posts := (where .Site.RegularPages "Section" "in" site.Params.mainSections) }}
          {{ range first 10 $posts }}
            <div class="media">
              {{ if .Params.thumbnailImageUrl }}
                <div class="media-left">
                  <a class="link-unstyled" href="{{ .Permalink }}">
                    <img class="media-image" src="{{ .Params.thumbnailImageUrl }}" width="90" height="90"/>
                  </a>
                </div>
              {{ end }}
              <div class="media-body">
                <a class="link-unstyled" href="{{ .Permalink }}">
                  <h3 class="media-heading">{{ .Title }}</h3>
                </a>
                <span class="media-meta">
                  <span class="media-date text-small">
                    {{ .Date.Format "Jan 1, 2006" }}
                  </span>
                </span>
                <div class="media-content hide-xs font-merryweather">{{ .Summary }}</div>
              </div>
              <div style="clear:both;"></div>
              <hr>
            </div>
          {{ end }}
        </div>
      </div>
      <div class="modal-footer">
        <p class="results-count text-medium"
          data-message-zero="{{ i18n "global.posts_found.zero" }}"
          data-message-one="{{ i18n "global.posts_found.one" }}"
          data-message-other="{{ i18n "global.posts_found.other" }}">
          {{ len $posts }} posts found
        </p>
      </div>
    </div>
  </div>
{{ end }}
